/**
 * 组件：Captcha
 * 作用：实现验证码的展示
 * 细节：
 *  1. 验证码是前端产生的还是后端产生的？【后端】
 *  2. 如何去获取验证码？【ajax】
 *  3. 获取的验证码应该是以什么形式进行传输的？【图片格式、URL地址、编码格式传输】
 *  4. 为什么取到验证码的数据后还要保存一个key值？【用于辨别用户，因此key需要跟随验证码的结果一起提交给服务器】
 *  5. key值在客户端收到之后一直到提交之前需要保存，保存到哪里合适？【存储到调用验证码组件的组件中】
 *  6. 怎么将key值传递给调用验证码的组件？【子传父，a. 传递方法；b. ref对象】
 */

import React, { Component } from 'react'
import axios from 'axios'
import url from '../config/url'
import PropTypes from 'prop-types'

class Captcha extends Component {
    state = {}

    render() {
        return (
            <img
                src={this.state.img}
                alt="验证码"
                title="点击刷新验证码"
                height={this.props.h}
                width={this.props.w}
                onClick={() => this.loadCap()}
            />
        )
    }

    componentDidMount() {
        this.loadCap()
    }

    loadCap() {
        axios.get(url.GetCaptcha).then((res) => {
            this.setState({
                img: res.data.img,
            })
            // 保存key值
            this.props.setKey && this.props.setKey(res.data.key)
        })
    }

    // 坑：后续需要回来取消网络请求。
}

Captcha.defaultProps = {
    w: 120,
    h: 36,
}
Captcha.propTypes = {
    setKey: PropTypes.func.isRequired
}

export default Captcha
